<template>
	<view class="" :style="$theme.pageStyle">
		<view class="map-info">
			<view class="store-info">
				<view class="let">
					<image :src="lawyerData.avatar" mode="aspectFill"></image>
					<view class="cent">
						<view class="title">
							{{ lawyerData.real_name }}
						</view>
						<view class="time">
							工作时间 9：:00-11：:00
						</view>
					</view>
				</view>
			</view>
			
		</view>

		<view class="" style="margin: 15px;margin-bottom: 0px;" v-if="lawyerData.offline_deposit == 1">
			<u-notice-bar :text="text1" mode="closable"></u-notice-bar>
		</view>
		
		<view class="other-info-item other-info-item-article">
			<its-calendar v-if="isDataLoaded" day_date="1,2,3,4,5,6,7" :sta_num="9" :end_num="18"
				:int_num="30" @getTime="TimeData"></its-calendar>
		</view>
		
		<cl-cell-group title="预约信息" :titleStyle="{'margin-top': '50rpx'}">

			<cl-cell title="预约时间" :isLink="false" :border="false">
				<template #icon>
					<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/331695292593srQO5n.png"
						mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
				</template>
				<template #label>{{book.time}}</template>
			</cl-cell>
			<view class="cl-cell" style="height:50px">
				<view class="cl-cell__body">
					<view class="body__left">
						<view class="title">手机号</view>
					</view>
			
					<view class="body__right">
						<view class="right-value">
							<input type="number" v-model="mobile" placeholder="请输入手机号" maxlength="11" >
						</view>
						<view class="right-icon">
							<uni-icons type="forward" size="16" color="#999"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</cl-cell-group>



		<view class="btn">
			<view class="btns">
				<view class="botton" @click="submit()">提交订单</view>
				<!-- <u-button type="primary" size="large" shape="circle" text="" ></u-button> -->
			</view>
		</view>

		<u-popup :show="paypop" mode="bottom" :round="15" @close="closespaypop" @open="openpaypop">
			<view style="padding-bottom: 30rpx;height: 350px;" class="showbottom">
				<view class="pay-type-list">
					<view class="pay-title">请选择支付方式：</view>
					<radio-group class="uni-flex" name="gender">
						<block v-for="(item, index) in payList" :key="index">
							<view class="type-item" :class="{ 'act': index === selectedIndex }" @click="selectNav(item,index)">
								<image :src="item.icon" mode="" class="a-img"></image>
								<view class="con">
									<text class="tit">{{item.pay_way_name}}</text>
								</view>
							</view>
						</block>
					</radio-group>
				</view>
				<view class="botton" @click="topay">
					<text class="text110">确认支付</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				id: '',
				book: '-',
				lawyerData: {},
				officeData: {},
				mobile:'',
				payList: uni.getStorageSync('pay'),
				Payinfo: {},
				pay_way: 1,
				paypop: false,
				text1: '当前律师开启了订金预约,您需要支付20元，若您爽约，订金将会支付给律师，若您赴约，定金将会退还。',
				selectedIndex: 10,
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getlawinfo();
		},
		onShow() {
		},

		methods: {
			paypops() {
				this.paypop = true
			},
			closespaypop() {
				this.paypop = false
			},
			selectNav(item, index) {
				this.selectedIndex = index;
				this.pay_way = item.pay_config_id
			},
			openpaypop() {

			},
			Tourl(url){
				uni.navigateTo({
					url: url
				})
			},
			// 选择支付方式
			changePayType(item) {
				this.pay_way = item.pay_config_id
			},
			TimeData(e) {
				// this.BtnType = e.type
				console.log(e)
				this.book = e
			},
			//获取律师信息
			async getlawinfo() {
				try {
					const res = await $H.post('lawyer/lawinfo', {
						id: this.id
					}, {
						token: true
					});
					this.lawyerData = res.data.lawyer
					this.isDataLoaded = true;
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
					uni.hideLoading();
				}
			},
			topay() {
				
				if(this.selectedIndex === 10){
					return uni.showToast({
						icon: "none",
						title: "请选择支付方式"
					})
				}
				
				$H.post('order/CreateMobileOrder', {
					id: this.id,
					book: this.book,
					pay_way: this.pay_way,
					mobile: this.mobile,
					type: 2,
					
				}, {
					token: true
				}).then(res => {

					this.paypop = false
					if (res.code == 1) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							setTimeout(() => {
								uni.navigateTo({
									url: '/order/consult/index'
								})
							}, 400)
						} else if (res.data.code == 2) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
							// this.paypop = false
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								appId: res.data.config.appId,
								timeStamp: res.data.config.timeStamp,
								nonceStr: res.data.config.nonceStr,
								package: res.data.config.package,
								signType: res.data.config.signType,
								paySign: res.data.config.paySign,
								success: function(res) {
									//跳转到会话页面
									setTimeout(() => {
										uni.navigateTo({
											url: '/order/consult/index'
										})
									}, 400)
								},
								fail: function(err) {
									uni.showToast({
										title: '支付失败',
										duration: 2000
									});
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}

				})

			},
			
			submit() {
				
				if(this.book === '-'){
					return uni.showToast({
						icon:"none",
						title: "请选择时间！"
					})
				}
				
				if(this.mobile === ''){
					return uni.showToast({
						icon:"none",
						title: "请输入电话号码！"
					})
				}
				
				if(this.mobile.length != 11){
					return uni.showToast({
						icon:"none",
						title: "请输入正确的电话号码！"
					})
				}
				
				this.paypop = true
			
			},


		}
	}
</script>

<style scoped lang="scss">
	.act{
		background: rgba(0, 122, 255, 0.1);
		border-radius: 15px;
	}
	.showbottom {
		padding: 20px;
	}
	
	.btn {
		position: fixed;
		bottom: 0px;
		padding-bottom: 20px;
		width: 100%;
		border-radius: 15px 15px 0px 0px;
		background: #fff;

		.btns {
			margin: 10px;
		}
	}

	.cl-cell {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding-left: 30rpx;
		box-sizing: border-box;
	
		.cl-cell__icon {
			margin-right: 30rpx;
			line-height: 1;
		}
	
		.cl-cell__body {
			position: relative;
			height: 100%;
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f7f7f7;
			padding: 25rpx 0;
	
			.body__left {
				max-width: 70%;
				width: 23%;
	
				.title {
					font-size: 28rpx;
					color: #333;
				}
	
				.label {
					font-size: 24rpx;
					color: #a1a2a6;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
	
			.body__right {
				flex: 1;
				padding-right: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
	
				.right-value {
					font-size: 28rpx;
					color: #666;
					width: 80%;
	
					image {
						width: 50px;
						height: 50px;
						border-radius: 50%;
					}
				}
	
	
				.right-icon {
					color: #808083;
					margin-left: 20rpx;
				}
			}
		}
	}
	

	.other-info-item {
		margin: 10px;
		border-radius: 15px;
		background: #fff;
	}
	

	.map-info {
		margin: 15px;
		padding: 5px;
		border-radius: 10px;
		background-color: #fff;
	}

	.store-info {
		height: 60px;
		padding: 10px;
		display: flex;
		justify-content: space-between;

		.let {
			display: flex;

			image {
				height: 50px;
				width: 50px;
				border-radius: 5px;
			}

			.cent {
				margin-left: 10px;

				.title {
					line-height: 30px;
					font-size: 16px;
					font-weight: 600;
				}

				.address {
					line-height: 15px;
					font-size: 12px;
					font-weight: 400;
				}

				.time {
					line-height: 20px;
					font-size: 12px;
				}
			}
		}

		.right {
			.items {
				margin-top: 12.5px;
				height: 25px;
				width: 90px;
				background: #699af8;
				border-radius: 5px;
				color: #fff;
				margin-right: 5px;
				font-size: 14px;
				line-height: 25px;
			}
		}
	}

	.rank-info {
		width: 100%;
		background-size: 22px 100%;
		color: #666;
	}



	.padding {
		// margin: 0px 8px;
		// padding: 0px 16px;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-center {
		justify-content: center;
	}

	.align-center {
		align-items: center;
	}

	.flex {
		display: flex;
	}

	.text-sm {
		font-size: 13px;
	}

	.margin-left-xs {
		margin-left: 5px;
	}


	.pay-type-list {
		// margin: 15px;
		margin-bottom: 10px;
		.pay-title {
			height: 70upx;
			font-size: 14px;
			line-height: 70upx;
			font-weight: bold;
			// border-bottom: 2upx solid #DDDAD4;
		}
	
		.type-item {
			height: 110upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30upx;
			position: relative;
			padding: 10px;
			margin-bottom: 15px;
			// border-bottom: 2upx solid #DDDAD4;
			.a-img {
				width: 70upx;
				height: 70upx;
				margin-right: 20upx;
			}
		}
	
		.b-b {
			border-bottom: 2upx solid #DDDAD4;
		}
	
		.icon {
			width: 100upx;
			font-size: 52upx;
		}
	
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
	
		.icon-weixinzhifu {
			color: #36cb59;
		}
	
		.icon-alipay {
			color: #01aaef;
		}
	
		.tit {
			font-size: 28upx;
			color: #f97020;
			margin-bottom: 4upx;
		}
	
		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			color: #f97020;
		}
	}

	.text110 {
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Regular;
	}


	.botton {
		bottom: 20px;
		position: fixed;
		width: 94%;
		border-radius: 44rpx;
		color: var(--color-btn-text);
		background-color: var(--color-primary);
		height: 50px;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	
	
	
	
</style>